<template>
	<view>
		<view class="page_title">
		</view>

		<view class="mine" v-if="!showCut">
			<scroll-view scroll-y class="scroll">
				<view class="banxin">
					<view class="base">
						<view class="avatar">
							<image :src="userDetails.avatar" mode="" />
						</view>
						<view class="base_info">
							<view class="name">
								<view>{{userDetails.name}}</view>
								<image v-if="userDetails.authentication.realNameStatus==0" class="nameauth"
									src="/static/img/nameauth.png" mode="" />
							</view>
							<view class="age" @click="handleAuth">
								<!-- <progress :percentage="integrity" stroke-width="8" /> -->
								<progress :percent="Number(integrity) " stroke-width="3" />
								<!-- <image src="/static/img/progress.png" mode=""/> -->
								完善资料 >
							</view>
						</view>
					</view>
					<view class="vip" v-if="userDetails.isVip">
						<view class="title">
							<image src="/static/img/vip.png" mode="" />
							私人订制会员
						</view>
						<text>有效期至：{{userDetails.expirationDate}}</text>
					</view>
					<view class="vip novip" v-else>
						<view>
							<view class="title">
								<image src="/static/img/novip.png" mode="" />
								未开通私人订制会员
							</view>
							<text>开通会员可享受更多尊享服务</text>
						</view>
						<view class="btn" @click="handleVip">了解权益</view>
					</view>
					<view class="history">
						<view class="list">
							<view @click="myMatch">
								<view class="num">{{countDetails.myBridge}}</view>
								<text class="info">我的牵线</text>
							</view>
							<view @click="myHeart">
								<view class="num">{{countDetails.myHeartBeat}}</view>
								<text class="info">我的心动</text>
							</view>
							<view @click="myVisitor(1)">
								<view class="num">{{countDetails.viewer}}</view>
								<text class="info">谁看过我</text>
							</view>
							<view @click="myVisitor(0)">
								<view class="num">{{countDetails.viewed}}</view>
								<text class="info">我看过谁</text>
							</view>
						</view>
						<view class="matcher">
							您的专属红娘：
							<image src="/static/img/matcher.png" mode="" />
							小红
							<image src="/static/img/_uni.png" mode="" />
							xiaohong123
						</view>
					</view>
					<view class="information">
						<view class="item">
							<view class="label">头像</view>
							<view class="info" @click="handleAvatar">
								<image class="avatar" :src="userDetails.avatar" mode="" />
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">昵称</view>
							<view class="info" @click="handleNickname">
								<view>{{userDetails.name}}</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">基本资料</view>
							<view class="info" @click="handleBase">
								<view>{{userDetails.age}}岁 {{userDetails.height}}cm
									{{userDetails.education?userDetails.education:''}}
								</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">择偶要求</view>
							<view class="info" @click="handleDemand">
								<view>
									{{userDetails.spouse.minAge}}-{{userDetails.spouse.maxAge}}岁
									{{userDetails.spouse.minHeight}}-{{userDetails.spouse.maxHeight}}cm
								</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">手机</view>
							<view class="info" @click="handleShowPhone">
								<view>{{userDetails.username}}</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">微信</view>
							<view class="info">
								<view>{{userDetails.wechatNumber}}</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">密码</view>
							<view class="info" @click="handleShowPassword">
								<view>******</view>
								<image class="next" src="/static/img/open.png" mode="" />
							</view>
						</view>
						<view class="item">
							<view class="label">注册时间</view>
							<view class="info">
								<view>{{userDetails.createTime}}</view>
							</view>
						</view>
						<button class="loginOut" type="primary" @click="loginOut">退出登录</button>

					</view>
				</view>
			</scroll-view>
			<tab-bar activeWay='mine'></tab-bar>
		</view>

		<view class="layers" v-if="showCut">
			<image-cropper ref="cropper" :cropScale="cropScale" :src="avatarUrl" @crop="handleCrop">
			</image-cropper>
			<!-- <MyCropper @close="hideCut" :cutRatio="cutRatio" imageSrc="avatarUrl" /> -->
		</view>

		<!-- 修改用户头像弹窗 -->
		<u-popup class="info-popup" :show="showAvatar" mode='bottom' @close="closeAvatar">
			<view class="nick_name">
				<view class="back" @click="closeAvatar">
					<image src="/static/img/back.png" mode="" />
				</view>
				<view class="income_title">
					修改头像
				</view>
				<view class="selector">
					<view class="ways">
						<view class="way wx-login" @click="handleUpload">
							<image src="/static/img/upload.png" mode="" />
							<text>本地上传</text>
						</view>
						<view class="way tel-login" @click="handleCamera">
							<image src="/static/img/camera.png" mode="" />
							<text>拍照上传</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 修改用户昵称弹窗 -->
		<u-popup class="info-popup" :show="showNickname" mode='bottom' @close="closeNickname">
			<view class="nick_name">
				<view class="back" @click="closeNickname">
					<image src="/static/img/back.png" mode="" />
				</view>
				<view class="income_title">
					修改昵称
				</view>
				<view class="nickname">
					<view class="my-input">
						<input class="uni-input" name="nickname" @input='handleName' placeholder="请输入昵称" />
					</view>
					<view class="tip">
						<image src="/static/img/tip.png" mode="" />
						只能由字母、数字、下划线和中文组成，最多十位
					</view>
				</view>
				<div class="confirm">
					<button type="primary" @click="confirmNickname">确认</button>
				</div>
			</view>
		</u-popup>

		<!-- 修改用户手机号弹窗 -->
		<u-popup class="info-popup" :show="showPhone" mode='bottom' @close="closePhone">
			<view class="infoPopup">
				<view class="back" @click="closePhone">
					<image src="/static/img/back.png" mode="" />
				</view>
				<view class="income_title">
					修改手机号
				</view>
				<view class="login">
					<form @submit="formSubmit" @reset="formReset">
						<view class="my-input username">
							<input class="uni-input" name="username" @input='handlePhone' placeholder="请输入手机号" />
						</view>
						<view class="my-input code">
							<input class="uni-input" name="code" @input='handleCode' placeholder="验证码" />
							<text class="send" v-if="codeCd==0" @click="sendCode">发送验证码</text>
							<text class="send-cd" v-else>重新发送({{codeCd}}s)</text>
						</view>
						<button formType="submit" type="primary" @click="handleLogin">确定</button>
					</form>
				</view>
				<!-- <div class="confirm">
				<button type="primary" @click="confirmNickname">确认</button>
			  </div> -->
			</view>
		</u-popup>

		<!-- 修改用户密码弹窗 -->
		<u-popup class="info-popup" :show="showPassword" mode='bottom' @close="closePassword">
			<view class="infoPopup">
				<view class="back" @click="closePassword">
					<image src="/static/img/back.png" mode="" />
				</view>
				<view class="income_title">
					修改密码
				</view>
				<view class="nickname password">
					<view class="my-input">
						<input password class="uni-input" name="password" @input='handlePassword'
							placeholder="请输入新密码" />
					</view>
					<view class="my-input">
						<input password class="uni-input" name="confirmPassword" @input='handleConfirm'
							placeholder="请确认新密码" />
					</view>
					<view class="tip">
						<image src="/static/img/tip.png" mode="" />
						至少6位，区分大小写
					</view>
				</view>
				<div class="confirm">
					<button type="primary" @click="submitPassword">确认</button>
				</div>
			</view>
		</u-popup>

		<!-- 资料完整度弹窗 -->
		<u-popup class="info-popup auth" :show="showAuth" mode='center' @close="closeAuth">
			<view class="back" @click="closeAuth">
				<image src="/static/img/back.png" mode="" />
			</view>
			<view class="icon">
				<image src="/static/img/integrity.png" mode="" />
			</view>
			<view class="title">资料完整度 <text>{{integrity}}%</text> </view>
			<view class="info">
				<text v-for="(item,index) in authList">{{index+1}}. {{item}}\n
				</text>
			</view>
			<view class="btn">
				<button type="primary" @click="goAuth">立即完善</button>
			</view>
		</u-popup>

		<!-- 退出登录确认弹窗 -->
		<u-popup class="info-popup loginOutPopup" :show="showLoginout" mode='center' @close="closeLoginout">
			<!-- <view class="back" @click="closeLoginout">
		    <image src="/static/img/back.png" mode=""/>
		  </view> -->
			<view class="tip">
				<image src="/static/img/tip.png" mode="" />
				<view>您确定要退出登录吗？</view>
			</view>
			<!-- <view class="title">您确定要退出登录吗？</view> -->
			<view class="btn">
				<button class="confirm" type="primary" @click="closeLoginout">取消</button>
				<button type="primary" @click="confirmLoginout">确定</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import TabBar from '@/components/TabBar.vue'
	import imageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	export default {
		components: {
			TabBar,
			imageCropper
		},
		data() {
			return {
				userDetails: {
					authentication: {},
					spouse: {},
				},
				countDetails: {},
				showAvatar: false,
				showNickname: false,
				showPhone: false,
				showPassword: false,
				showAuth: false,
				showLoginout: false,
				nickname: '',
				phone: '',
				code: '',
				password: '',
				confirmPassword: '',
				codeCd: 0,
				integrity: '',
				authList: [],
				showCut: false,
				cropScale: '1:1', //裁剪比例，默认1:1
				width: 500,
				// imgSrc: 'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
				imgSrc: null, //需要裁剪地址
				avatarUrl: null, //裁剪后图片地址
				isfrom: null, //页面来源
				phoneReg: /^1[3456789]\d{9}$/
			};
		},
		onShow() {
			this.initInfo()
		},
		methods: {
			initInfo() {
				let that = this
				request(`/employee/${uni.getStorageSync('id')}`).then((res) => {
					// console.log(res.data.data,'authentication');
					let userDetails = res.data.data
					that.userDetails = userDetails
					that.islike = userDetails.heart
					that.isVip = userDetails.isVip
					console.log(this.userDetails, 'userDetails');
				})
				request(`/employee/profileCompletion`).then((res) => {
					let authDetails = res.data.data
					that.integrity = authDetails.completedFields.slice(0, -1)
					that.authList = authDetails.incompleteItems
					console.log(authDetails, 'authDetails');
				})
				request(`/heartBeat/count`).then((res) => {
					// console.log(res.data.data,'authentication');
					let countDetails = res.data.data
					that.countDetails = countDetails
					console.log(countDetails, 'countDetails');
				})
			},
			loginOut() {
				this.showLoginout = true
			},
			confirmLoginout() {
				this.showLoginout = false
				uni.redirectTo({
					url: '/pages/userInfo/loginWay/loginWay'
				})
				uni.clearStorageSync()
			},
			closeLoginout() {
				this.showLoginout = false
			},
			handleAuth() {
				this.showAuth = true
			},
			closeAuth() {
				this.showAuth = false
			},
			goAuth() {
				uni.navigateTo({
					url: '/pages/userAuth/authMenu/authMenu'
				})
			},
			handleVip() {
				uni.navigateTo({
					url: '/pages/linkPage/customize/customize'
				})
			},
			myMatch() {
				uni.navigateTo({
					url: '/pages/linkPage/myString/myString'
				})
			},
			myHeart() {
				uni.navigateTo({
					url: '/pages/tabPage/heart/heart'
				})
			},
			myVisitor(type) {
				uni.navigateTo({
					url: `/pages/linkPage/myRecords/myRecords?type=${type}`
				})
			},
			handleBase() {
				uni.navigateTo({
					url: `/pages/linkPage/baseInfo/baseInfo`
				})
			},
			handleDemand() {
				uni.navigateTo({
					url: `/pages/linkPage/demandInfo/demandInfo`
				})
			},
			handleAvatar() {
				this.showAvatar = true
			},
			closeAvatar() {
				this.showAvatar = false
			},
			handleNickname() {
				this.showNickname = true
			},
			closeNickname() {
				this.showNickname = false
				this.nickname = ''
			},
			handleShowPhone() {
				this.showPhone = true
			},
			closePhone() {
				this.showPhone = false
				this.phone = ''
				this.codeCd = 0
			},
			handleShowPassword() {
				this.showPassword = true
			},
			closePassword() {
				this.showPassword = false
				this.password = ''
				this.confirmPassword = ''
			},
			handlePassword(e) {
				console.log(e.detail.value, 'handlePassword');
				this.password = e.detail.value
			},
			handleConfirm(e) {
				this.confirmPassword = e.detail.value
			},
			submitPassword() {
				console.log(this.password, 'this.password');
				var passwordReg = /^[a-zA-Z0-9]{6,}$/;
				if (!this.password || !this.confirmPassword) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (passwordReg.test(this.password)) {
					if (this.password == this.confirmPassword) {
						request(`/employee`, {
							method: 'PUT',
							data: {
								id: uni.getStorageSync('id'),
								password: this.password
							}
						}).then((res) => {
							if (res.data.code == 1) {
								this.closePassword()
								uni.showToast({
									title: '修改成功',
									icon: 'none',
									duration: 2000
								})
							}
						})
					} else {
						uni.showToast({
							title: '确认密码不一致',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '密码格式错误',
						icon: 'none',
						duration: 2000
					})
				}
			},
			handleName(e) {
				console.log(e.detail.value, 'handleName');
				this.nickname = e.detail.value
			},
			handlePhone(e) {
				// console.log(e.detail.value,'handlePhone');
				this.phone = e.detail.value
			},
			handleCode(e) {
				// console.log(e.detail.value,'handlePhone');
				this.code = e.detail.value
			},
			sendCode() {
				console.log(this.phone, 'sendCode');
				// 示例代码
				if (!this.phone) {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.phoneReg.test(this.phone)) {
					console.log("手机号格式正确");
					this.codeCd = 60
					let timer = setInterval(() => {
						console.log('setInterval');
						this.codeCd = --this.codeCd
						if (this.codeCd == 0) {
							clearInterval(timer)
						}
					}, 1000)
					request(`/sms/send/${this.phone}`).then(((res) => {
						console.log(res, 'res');
					}))
				} else {
					console.log("手机号格式不正确");
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 2000
					})
				}
			},
			formSubmit(e) {
				const account = e.detail.value
				console.log('form发生了submit事件，携带数据为：', e.detail.value)
				if (!account.username || !account.code) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.phoneReg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				request(`/employee`, {
					method: 'PUT',
					data: {
						id: uni.getStorageSync('id'),
						code: this.code,
						username: this.phone
					}
				}).then((res) => {
					if (res.code == 1) {
						this.closePhone()
						this.initInfo()
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			confirmNickname() {
				console.log(this.nickname, 'this.nickname');
				let nicknameReg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,10}$/;
				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (nicknameReg.test(this.nickname)) {
					console.log("格式正确");
					uni.setStorageSync('name', this.nickname)
					// getApp().globalData.userInfo.name = this.nickname
					request(`/employee/insertBaseInfo`, {
						method: 'POST',
						data: {
							name: this.nickname
						}
					}).then((res) => {
						if (res.data.code == 1) {
							this.closeNickname()
							this.initInfo()
							uni.showToast({
								title: '修改成功',
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					console.log("格式错误");
					uni.showToast({
						title: '昵称格式错误',
						icon: 'none',
						duration: 2000
					})
				}
			},
			handleUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						that.showAvatar = false
						that.avatarUrl = res.tempFilePaths[0]
						that.showCut = true
						that.$forceUpdate()
						console.log(res.tempFilePaths[0],that.showCut, 'res')
					}
				})
			},
			handleCamera() {
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['camera'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						that.showAvatar = false
						that.avatarUrl = res.tempFilePaths[0]
						that.showCut = true
						that.$forceUpdate()
						console.log(res.tempFilePaths[0], that.showCut,'res')
					}
				})
			},
			handleCrop(e) {
				let that = this;
				// console.log(e)
				if (e && e.tempFilePath) {
					var filePath = null;
					// #ifdef H5
					// 返回besa64 {tempFilePath: '…qD4BlmXardc/z2wLW/we1LoP21+aEvgAAAABJRU5ErkJggg=='}
					this.avatarUrl = e.tempFilePath;
					that.showCut = false
					console.log(this.avatarUrl, 'this.imgPath');
					request(`/common/uploadBase64`, {
						method: 'POST',
						data: {
							file: this.avatarUrl.slice(22),
							filename: ""
						}
					}).then(((res) => {
						console.log(res.data.data, 'res');
						that.avatar = res.data.data
						uni.setStorageSync('avatar', res.data.data)
						request(`/employee/insertBaseInfo`, {
							method: 'POST',
							data: {
								avatar: res.data.data
							}
						}).then((res) => {
							if (res.data.code == 1) {
								that.initInfo()
								uni.showToast({
									title: '修改成功',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}))
					// #endif
					// #ifdef MP-WEIXIN
					// 返回缓存地址 {tempFilePath: "http://tmp/92DOAKXWBPmrb8fd3ad722b9693120bf7ab6dbda5f18.png"}
					var filePaths = e.tempFilePath;
					uni.getFileSystemManager().readFile({
						filePath: filePaths, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							//console.log('data:image/png;base64,'+res.data)
							that.avatarUrl = 'data:image/png;base64,' + res.data;
							that.showCut = false
							request(`/common/uploadBase64`, {
								method: 'POST',
								data: {
									file: that.avatarUrl,
									filename: ""
								}
							}).then(((res) => {
								console.log(res.data.data, 'res');
								that.avatar = res.data.data
								request(`/employee/insertBaseInfo`, {
									method: 'POST',
									data: {
										avatar: res.data.data
									}
								}).then((res) => {
									if (res.data.code == 1) {
										that.initInfo()
										uni.showToast({
											title: '修改成功',
											icon: 'none',
											duration: 2000
										})
									}
								})
							}))
						}
					})
					// #endif
				}
			},
			hideCut(e) {
				this.showCut = false
				let obj = e.detail;
				//是否已经截取
				if (obj) {
					console.log('------obj', obj)
					this.avatarUrl = obj.path
					uni.getFileSystemManager().readFile({
						filePath: obj.path, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => {
							console.log('data:image/png;base64,' + res.data)
							request(`/common/uploadBase64`, {
								method: 'POST',
								data: {
									file: res.data,
									filename: ""
								}
							}).then(((res) => {
								console.log(res.data.data, 'res');
								uni.setStorageSync('avatar', res.data.data)
								request(`/employee/insertBaseInfo`, {
									method: 'POST',
									data: {
										avatar: res.data.data
									}
								}).then((res) => {
									if (res.data.code == 1) {
										this.initInfo()
										uni.showToast({
											title: '修改成功',
											icon: 'none',
											duration: 2000
										})
									}
								})
							}))
						},
						fail: res => {
							uni.showModal({
								content: '图片编码失败',
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(249, 249, 249, 1);
	}

	.page_title {
		height: 300rpx;
	}

	.scroll {
		height: 80vh;
		margin-top: -200rpx;
	}

	.base {
		display: flex;
		align-items: center;

		// margin-top: -200rpx;
		.avatar {
			position: relative;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}

		.base_info {
			flex: 1;
			margin: 15rpx 20rpx;
			height: 120rpx;

			.name {
				font-weight: 500;
				display: flex;
				align-items: center;
				line-height: 56rpx;
				margin-top: 10rpx;
				color: rgba(255, 255, 255, 1);

				view {
					max-width: 200rpx;
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
					margin-right: 20rpx;
				}
			}

			.age {
				margin-top: 20rpx;
				color: white;
				font-size: 20rpx;
				display: flex;
				align-items: center;

				progress {
					width: 240rpx;
					height: 16rpx;
					margin-right: 20rpx;
				}

				image {
					width: 240rpx;
					height: 16rpx;
					margin-right: 20rpx;
				}
			}

			.nameauth {
				width: 120rpx;
				height: 40rpx;
			}
		}
	}

	.vip {
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 234, 163, 1);

		.title {
			display: flex;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-weight: 500;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		text {
			display: block;
			margin-top: 5rpx;
			font-size: 16rpx;
			color: rgba(102, 102, 102, 1);
		}

		.btn {
			font-size: 28rpx;
			line-height: 34rpx;
			padding: 10rpx 20rpx;
			border-radius: 46rpx;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(156, 156, 255, 1);
		}
	}

	.novip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(229, 229, 229, 1);
	}

	.history {
		overflow: hidden;
		margin-top: 30rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 1);
		;

		.list {
			padding: 20rpx 50rpx;
			display: flex;
			justify-content: space-around;

			.num {
				font-size: 44rpx;
				line-height: 52rpx;
				text-align: center;
				font-family: 'Alimama_ShuHeiTi_Bold';
			}

			.info {
				font-size: 20rpx;
				line-height: 28rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

		.matcher {
			display: flex;
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 34rpx;
			padding: 10rpx 0;
			justify-content: center;
			background-color: rgba(235, 235, 255, 1);
			;
			text-align: center;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				margin: 0 10rpx;
			}
		}
	}

	.information {
		border-radius: 40rpx;
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 1);
		;

		.item {
			display: flex;
			flex: 1;
			margin-bottom: 40rpx;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
				line-height: 40rpx;
			}

			.info {
				font-size: 28rpx;
				display: flex;
				color: rgba(166, 166, 166, 1);
				line-height: 40rpx;
				align-items: center;

				view {
					font-size: 28rpx;
				}

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.next {
					width: 24rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}
		}

		.loginOut {
			color: rgba(107, 107, 255, 1);
			background-color: rgba(235, 235, 255, 1) !important;
		}
	}

	.info-popup /deep/ .u-popup__content {
		height: 700rpx !important;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;
		z-index: 999;

		.infoPopup {
			height: 450rpx;
		}

		.nick_name {
			height: 380rpx;
		}

		.back {
			position: absolute;
			width: 65rpx;
			height: 65rpx;
			border-radius: 20rpx;
			background-color: #EBEBFF;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.income_title {
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 10rpx;
		}

		.ways {
			width: 50%;
			font-size: 28rpx;
			margin: 85rpx auto;
			color: aliceblue;

			.way {
				display: flex;
				height: 80rpx;
				margin-top: 40rpx;
				border-radius: 100rpx;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 36rpx;
					margin: 0 20rpx;
				}
			}

			.wx-login {
				background-color: #9C9CFF;
			}

			.tel-login {
				color: #9C9CFF;
				background-color: #EBEBFF;
			}
		}

		.nickname {
			width: 90%;
			margin: 0 auto;

			// margin-top: 50rpx;
			.my-input {
				border-radius: 50rpx;
			}

			.tip {
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				justify-content: start;
				font-size: 24rpx;
				// background-color: rgb(117, 55, 55);
				color: rgba(156, 156, 255, 1);

				image {
					width: 24rpx;
					height: 24rpx;
					margin: 0 10rpx;
				}
			}
		}

		.password {
			width: 80%;
		}

		.login {
			width: 90%;
			margin: 0 auto;
			margin-top: 80rpx;

			.code .send {
				color: rgba(107, 107, 255, 1);
				margin: 0 20rpx;
			}

			.code .send-cd {
				color: rgba(204, 204, 204, 1);
				margin: 0 20rpx;
			}
		}

		button {
			width: 65%;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			right: 0;
			background-color: rgb(117, 38, 38);
		}
	}

	.loginOutPopup /deep/ .u-popup__content {
		box-sizing: border-box;
		height: 280rpx !important;
		border-radius: 40rpx;
		padding: 40rpx;

		.tip {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx 0;
			line-height: 80rpx;
			color: rgba(102, 102, 102, 1);

			// background-color: rgb(168, 72, 72);
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 20rpx;
			}
		}

		.btn {
			position: absolute;
			width: 85%;
			display: flex;
			justify-content: space-between;
			bottom: 0rpx;

			button {
				width: 45%;
				position: relative;
			}

			.confirm {
				color: rgba(156, 156, 255, 1);
				background-color: rgba(235, 235, 255, 1) !important;
			}
		}
	}

	.auth /deep/ .u-popup__content {
		text-align: center;
		border-radius: 40rpx !important;
		width: 550rpx;

		.icon {
			// margin: 20rpx auto;
			text-align: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;

			text {
				color: rgba(107, 107, 255, 1);
			}
		}

		.info {
			width: 65%;
			padding: 30rpx;
			height: 250rpx;
			line-height: 45rpx;
			color: rgba(102, 102, 102, 1);
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: rgba(245, 245, 255, 1);

			text {
				font-size: 24rpx;
			}
		}

		.btn {
			button {
				background-color: #EBEBFF;
				width: 85%;
			}
		}
	}
</style>